<template>
  <div class="docker">
    <div v-for="(item,index) in dockerList"
         :class="{'docker_item':true,'docker_item--active':index===currentIndex}"
         class="docker_item" :key="item.icon"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"/>
        <div class="docker_title">{{ item.text }}</div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Docker',
  props: ['currentIndex'],
  setup () {
    const dockerList = [
      {
        icon: '&#xe6f3;',
        text: '首页',
        to: { name: 'Home' }
      },
      {
        icon: '&#xe7e5;',
        text: '购物车',
        to: { name: 'CartList' }
      },
      {
        icon: '&#xe61e;',
        text: '订单',
        to: { name: 'OrderList' }
      },
      {
        icon: '&#xe660;',
        text: '我的',
        to: { name: 'Home' }
      }
    ]
    return { dockerList }
  }
}
</script>
<style lang="scss" scoped>
@import '../style/viriables.scss';
@import '../style/mixins.scss';

.docker {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .49rem;
  border-top: .01rem solid $content-bgColor;

  &_item {
    flex: 1;
    text-align: center;

    .iconfont {
      margin: .07rem 0 .02rem 0;
      font-size: .18rem
    }

    a {
      color: $content-fontcolor;
      text-decoration: none;
    }

    &--active {
      a {
        color: #1FA4FC;
      }
    }
  }

  &_title {
    font-size: .2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }

  color: $content-fontcolor;
}
</style>
